<template>
  <div class="working-schedule">
    <div class="form">
      <el-row :gutter="5">
        <el-col :span="18">
          <AElForm :data="form" :initData="initData" :rows="3" label-width="0" @change="change" />
        </el-col>
        <el-col :span="6" class="form-header-btn">
          <el-button type="primary">查询排班</el-button>
          <el-button type="primary" @click="addSchedule">新增排班</el-button>
        </el-col>
      </el-row>
    </div>
    <AElTable :data="data" :columns="columns" maxHeight="400" @cell-click="cellClick">
      <AElPagination :pageSize="pageSize" slot="pagination" />
    </AElTable>
    <SelectPatient ref="SelectPatient" :patientList="patientList" />
    <EditingSchedule ref="EditingSchedule" type="2" />
  </div>
</template>

<script>
import SelectPatient from '../selectPatient'; // 选择病人信息
import EditingSchedule from '../editingSchedule'; // 编辑排班信息
export default {
  name: 'Test',
  components: { SelectPatient, EditingSchedule },
  props: {
    patientList: { type: Array, default: () => [] }, // 病人信息列表
  },
  data() {
    return {
      formData: {}, // 表单数据
      form: {}, // 表单配置
      initData: { btn: "0" }, // 表单初始化数据
      data: [], // 表格数据
      columns: [], // 表格配置
      pageSize: {
        page: 1,
        size: 10,
        total: 200
      }, // 表格分页配置
    }
  },
  created() {
    this.setForm();
    this.getData();
    this.setColumns();
  },
  methods: {
    /**
     * 新增排班
     */
    addSchedule() {
      this.$refs.EditingSchedule.editVisible(true);
    },
    /**
     * 表单数据发生改变时
     */
    change(form) {
      this.formData = form;
      this.setColumns();
    },
    /**
     * 配置表单
     */
    setForm() {
      this.form = {
        date: {
          type: "scheduleDate",
          placeholder: "查询日期"
        },
        btn: {
          aligning: "center",
          render: (callback = () => null, key = null, form = {}) => {
            const change = data => callback(data, key)
            return (
              <el-radio-group value={form[key]}>
                <el-radio-button label="0" nativeOnClick={() => change("0")}>全天</el-radio-button>
                <el-radio-button label="1" nativeOnClick={() => change("1")}>上午</el-radio-button>
                <el-radio-button label="2" nativeOnClick={() => change("2")}>下午</el-radio-button>
              </el-radio-group>
            )
          }
        },
        therapistName: {
          placeholder: "请输入治疗设备查询"
        }
      }
    },
    /**
     * 配置表格
     */
    setColumns() {
      let schedulingTime = this.$FN.schedulingTime;
      schedulingTime.forEach(item => {
        item.align = "center";
        item.width = "100px";
        item.render = () => <div>123</div>
      });

      let { btn = "0" } = this.formData;
      let list = [
        { prop: "therapistName", label: "治疗师名称", width: "120px", fixed: "left" },
        { prop: "scheduleDate", label: "日期", fixed: "left" },
        {
          prop: "AM", label: "上午",
          children: schedulingTime.slice(0, 8)
        },
        {
          prop: "PM", label: "下午",
          children: schedulingTime.slice(8)
        }
      ];
      // this.columns = list;
      switch (btn) {
        case "1": list = list.filter(item => item.prop != "PM"); break;
        case "2": list = list.filter(item => item.prop != "AM"); break;
      };
      this.columns = list;

    },
    /**
     * 表格单元格被点击时
     */
    cellClick(row, column) {
      console.log(row, column, "row, column");
      this.$refs.SelectPatient.editVisible(true);
      // this.$refs.EditingSchedule.editVisible(true);
    },
    /**
     * 数据获取
     */
    getData() {
      this.data = [
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        },
        {
          therapistName: "贝吉塔",
          scheduleDate: "2027-8-9",
          province: "迪迦",
          province2: "戴维",
          test: "测试数据"
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>